<template>
    <d2-container>
        <el-main>
            <el-form ref="courseOrder" :model="courseOrder" label-width="80px" label-position="left"
                     :rules="formRules">
                <el-form-item label="所在校区" prop="school">
                    <el-select
                            v-model="courseOrder.school"
                            filterable
                            :disabled="disabled"
                            @change="getCourseList">
                        <el-option
                                v-for="item in option.schoolList"
                                :key="item._id"
                                :label="item.name"
                                :value="item._id"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="购买课程" prop="course">
                    <el-radio-group @change="getClassListByCourse" v-model="courseOrder.course">
                        <el-radio-button v-for="course in option.courseList" :label="course._id" :key="course._id">
                            {{course.name}}
                        </el-radio-button>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="选择班级" prop="class">
                    <el-radio-group v-model="courseOrder.class" v-if="option.classList.length > 0">
                        <el-radio-button v-for="_class in option.classList" :label="_class._id" :key="_class._id">
                            {{_class.name}}
                        </el-radio-button>
                    </el-radio-group>
                    <div v-if="option.classList.length == 0"> 该课程暂无班级，先请添加班级</div>
                </el-form-item>

                <el-form-item label="选择学生" prop="student">
                    <el-button
                            @click="selectStudent = true"
                            style="float:left;margin:10px"
                            icon="el-icon-plus"
                            size="small"
                            type="primary"
                            :disabled="disabled"
                    >选择购买的学生
                    </el-button>

                    <el-dialog title="学生列表" :visible.sync="selectStudent">
                        <el-input placeholder="请输入学生姓名" v-model="searchStudentName" size="small">
                            <el-button slot="append" icon="el-icon-search" @click="searchStudent"></el-button>
                        </el-input>
                        <el-table :data="studentList">
                            <el-table-column property="name" label="学生姓名"></el-table-column>
                            <el-table-column fixed="right" label="操作">
                                <template slot-scope="scope">
                                    <el-button @click="addStudent(scope.row)" type="text">选择</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div slot="footer" class="dialog-footer">
                            <el-button type="primary" @click="selectStudent = false">确认</el-button>
                        </div>
                    </el-dialog>


                    <el-table :data="selectedStudentList" border style="width: 100%">
                        <el-table-column prop="name" label="学生姓名"></el-table-column>
                        <el-table-column fixed="right" label="操作">
                            <template slot-scope="scope">
                                <el-button @click="deleteStudentClick(scope.$index)" type="text" size="small"
                                           :disabled="disabled">删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>


                <el-form-item label="支付模式" prop="payWay">
                    <el-radio-group v-model="courseOrder.payWay">
                        <el-radio-button label="1">按时长收费</el-radio-button>
                        <el-radio-button label="2">按金额收费</el-radio-button>
                    </el-radio-group>
                </el-form-item>

                <!-- <el-form-item v-if="courseOrder.payWay==2" label="金额/每节">
                    <el-input placeholder disabled="disabled" v-model.number="courseOrder.payByMoney"></el-input>
                </el-form-item>

                <el-form-item v-if="courseOrder.payWay==1" label="时长/每节">
                    <el-input placeholder disabled="disabled" v-model.number="courseOrder.payByTimes"></el-input>
                </el-form-item> -->

                <el-form-item label="对内备注" prop="memoIn">
                    <el-input placeholder v-model="courseOrder.memoIn"></el-input>
                </el-form-item>

                <el-form-item label="对外备注" prop="memoOut">
                    <el-input placeholder v-model="courseOrder.memoOut"></el-input>
                </el-form-item>
            </el-form>
        </el-main>

        <el-footer>
            <el-button type="primary" @click="submit">提交</el-button>
        </el-footer>
    </d2-container>
</template>
<script>
    import request from "@/plugin/axios";
    import {mapState} from "vuex";

    export default {
        data() {
            return {

                formRules: {
                    name: [
                        {required: true, message: '请输入学生姓名', trigger: 'blur'},
                        {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                    ],
                    studentId: [
                        {required: true, message: '请输入学号', trigger: 'change'}
                    ],
                    gender: [
                        {required: true, message: '请选择学生性别', trigger: 'change'}
                    ],
                    age: [
                        {required: true, message: '请输入家长年龄', trigger: 'change'},
                        {type: 'number', min: 5, max: 100, message: '年龄范围在5-100之间', trigger: 'change'}

                    ],
                    school: [
                        {required: true, message: '请选择所在校区', trigger: 'change'}
                    ],
                    buyer: [
                        {required: true, message: '请选择购买者类型', trigger: 'change'}
                    ],
                    staff: [
                        {required: true, message: '请选择购买者类型', trigger: 'change'}
                    ],
                    class: [
                        {required: true, message: '请选择班级', trigger: 'change'}
                    ],
                    student: [
                        {required: true, message: '请选择学生', trigger: 'change'}
                    ],
                    payType: [
                        {required: true, message: '请选择付费类型', trigger: 'change'}
                    ],
                    cellphone: [
                        {required: true, message: '手机号不能为空', trigger: 'change'},
                        {type: 'number', message: '请输入11位合法手机号', trigger: 'change'}
                    ],
                    birthday: [
                        {type: 'date', required: true, message: '请选择出生日期', trigger: 'blur'}
                    ],
                    selectedSchoolList: [
                        {type: 'array', required: true, message: '请选择购买校区', trigger: 'blur'}
                    ],
                    selectedStudentList: [
                        {type: 'array', required: true, message: '请选择购买学生', trigger: 'blur'}
                    ],
                    productOrder: [
                        {type: 'array', required: true, message: '请选择采购商品', trigger: 'blur'}
                    ],
                    payWay: [
                        {required: true, message: '请选择支付方式', trigger: 'change'}
                    ],
                    payStatus: [
                        {required: true, message: '请选择支付状态', trigger: 'change'}
                    ],
                    hasBonus: [
                        {required: true, message: '请选择是否提成', trigger: 'change'}
                    ],
                    discount: [
                        {required: true, min: 0, type: 'number', message: '请输入合法优惠金额', trigger: 'change'}
                    ],
                    course: [
                        {type: 'array', required: true, message: '请选择课程', trigger: 'blur'}
                    ],
                    total: [
                        {required: true, message: '价格不能为空', trigger: 'change'},
                        {type: 'number', message: '请输入合法价格', trigger: 'change'}
                    ],
                },


                option: {
                    courseList: undefined,
                    schoolList: undefined,
                    classList: []
                },

                searchStaffName: undefined,
                selectStaff: false,
                selectStudent: false,
                searchStudentName: undefined,
                searchStaffCount: undefined,
                courseOrder: {
                    school: undefined,
                    student: undefined,
                    payWay: undefined,
                    memoIn: undefined,
                    memoOut: undefined,
                    course: undefined,
                    class: undefined,
                    payByMoney: undefined,
                    payByTimes: undefined
                },
                studentList: [],
                searchStudentCount: undefined,
                disabled: false,
                selectedStudentList: [],
                courseStaff: undefined,
                staffList: [],
                selectedProductList: [],
                selectedStaffList: [],
                courseOrderStaff: undefined,

            };
        },
        computed: {
            ...mapState('d2admin/user', ['info']),
        },
        methods: {
            deleteStaffClick(e) {
                this.selectedStaffList.splice(e, 1)
            },
            searchStaff() {
                this.getStaffList(1);
            },
            addStaff(e) {
                this.selectedStaffList = [];
                this.selectedStaffList.push(e);
                this.courseOrder.staff = e._id;
                this.$message({
                    showClose: true,
                    message: '添加成功',
                    type: 'success'
                });

            },
            getStaffList(page) {
                request({
                    url: "/staff/getStaffList",
                    method: "post",
                    data: {
                        page: page,
                        pageSize: 10,
                        name: this.searchStaffName,
                        school: this.option.schoolList.map(value => value._id)
                    }
                }).then(res => {
                    this.staffList = res.data.staff;
                    this.searchStaffCount = res.data.total;
                });


            },
            submit() {
                let url = "/courseOrder/addCourseOrder";
                request({
                    url: url,
                    method: "post",
                    data: this.courseOrder
                }).then(res => {
                    if (res.code == 200) {
                        if (res.data.message != undefined){
                            this.$alert("", res.data.message, {
                            confirmButtonText: "确定",
                            }).then(()=>{
                                this.$router.push({path: "/course-order-list"})
                                this.course = {}
                            })
                            
                        }
                        else{
                            this.$alert("", '新建成功！', {
                                confirmButtonText: "确定"
                            }).then(()=>{
                                this.$router.push({path: "/course-order-list"})
                                this.course = {}
                            })
                        }
                        
                    }
                    // 返回数据
                });
            },
            addProduct(e) {
                if (this.selectedProductList.map(event => {
                    return event._id
                }).indexOf(e._id) == -1) {
                    this.selectedProductList.push(e)
                } else {
                    this.$message({
                        showClose: true,
                        message: '已经添加这个商品了哦',
                        type: 'error'
                    });
                }
            },
            staffCurrentChange(e) {
                this.getStaffList(e);
            },
            getSchoolList() {
                this.option.schoolList = this.info.school;
                this.courseOrder.school = this.option.schoolList[0]._id;
                //零时修正
                if (this.info.role.indexOf('root') > -1) {
                    this.courseOrder.school = this.option.schoolList[1]._id;
                }
            },
            getCourseList() {
                this.getStudentList(1)
                this.courseOrder.class = undefined;
                this.option.classList = [];
                let data = {};
                (data.page = 1), (data.pageSize = 999999);
                data.school = [this.courseOrder.school]
                request({
                    url: "/course/getCourseList",
                    method: "post",
                    data
                }).then(res => {
                    this.option.courseList = res.data.course;

                });
            },
            searchStudent() {
                this.getStudentList(1);
            },
            addStudent(e) {
                this.selectedStudentList = []
                this.selectedStudentList.push(e)
                this.courseOrder.student = e._id
                this.$message({
                    showClose: true,
                    message: '添加成功',
                    type: 'success'
                });
            },
            getStudentList() {
                request({
                    url: "/student/getStudentList",
                    method: "post",
                    data: {
                        page: 1,
                        pageSize: 9999,
                        name: this.searchStudentName,
                        school: [this.courseOrder.school]
                    }
                }).then(res => {
                    if (res.code == 200) {
                        this.studentList = res.data.students;
                        this.searchStudentCount = res.data.count;
                    }
                });
            },
            getCourseTypeList() {
                let data = {};
                (data.page = 1), (data.pageSize = 999999);
                request({
                    url: "/courseType/getCourseTypeList",
                    method: "post",
                    data
                }).then(res => {
                    this.option.courseTypeList = res.data.courseType;
                    // 返回数据
                });
            },
            getClassListByCourse() {
                this.option.courseList.forEach((value) => {
                    if (value._id == this.courseOrder.course) {
                        this.courseOrder.payByMoney = value.payByMoney;
                        this.courseOrder.payByTimes = value.payByTimes;
                    }
                });
                let course = this.courseOrder.course;
                let school = this.courseOrder.school;
                let data = {};
                data.course = course;
                data.page = 1;
                data.pageSize = 999999;
                data.school = school;
                request({
                    url: "/class/getClassList",
                    method: "post",
                    data
                }).then(res => {
                    if (res.code === 200) {
                        this.option.classList = res.data.class;

                        if(!res.data.class ||res.data.class.length ===0){
                            this.$message({
                                showClose: true,
                                message: '未查询到相关班级，请先创建',
                                type: 'info'
                            });
                        }
                    }
                });
            }
        },
        created() {
            this.getSchoolList();
            this.getCourseList();
            this.getCourseTypeList();
        }
    };
</script>
